<template>
    <!-- 商品推荐 -->
    <div class="goods-recommend" v-if="commendGoods" v-loading="!commendGoods">
        <el-card shadow="hover">
            <template #header>
                <div class="card-header">
                    <h3>
                        <el-icon style="vertical-align: middle"
                            ><MagicStick /></el-icon
                        >同类商品推荐
                    </h3>
                </div>
            </template>
            <div class="card-body">
                <el-carousel
                    height="220px"
                    :autoplay="false"
                    arrow="always"
                    trigger="click"
                    indicator-position="outside"
                >
                    <el-carousel-item v-for="item in commendGoods" :key="item">
                        <div class="block">
                            <GoodsItem
                                v-for="goods in item"
                                :key="goods"
                                :goods="goods"
                                :lazy="false"
                            />
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { findGoodsByLimit } from '@/apis/goods'
import { arrayVariableTwo } from '@/hooks/goods'
import { onMounted, ref } from 'vue'
let commendGoods = ref('')
onMounted(() => {
    findGoodsByLimit(28).then(res => {
        commendGoods.value = arrayVariableTwo(res, 7)
    })
})
</script>

<style lang="scss" scoped>
.goods-recommend {
    margin-top: 10px;
    height: 330px;
}
.el-card {
    height: 100%;
}
.block {
    background-color: rgba(211, 211, 211, 0.524);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    padding-top: 10px;
    padding-left: 20px;
}
</style>
